<template>
    <div class="my-counter">
        <button type="button" class="btn btn-light" @click="minus">-</button>
        <input type="number" class="form-control inp" v-model="good.count">
        <button type="button" class="btn btn-light" @click="plus">+</button>
    </div>
</template>
  
<script>
export default {

    props: {
        good: Object
    },
    methods: {
        minus() {
            this.good.count--;
        },
        plus() {
            this.good.count++;
        }
    },
    watch: {
        good: {
            handler(newVal, oldVal) {
                if (newVal.count < 1) {
                    this.good.count = 1;
                }
            },
            deep: true
        }
    }

}
</script>
  
<style lang="less" scoped>
.my-counter {
    display: flex;

    .inp {
        width: 45px;
        text-align: center;
        margin: 0 10px;
    }

    .btn,
    .inp {
        transform: scale(0.9);
    }
}
</style>